import { useState } from 'react';
import XMLBuilder, { XMLBuilderProps } from '../apps/xml_builder'
import React from 'react';

const test_xml = `<bookstore>
    <book category="cooking">
        <title lang="en">Everyday Italian</title>
        <author>Giada De Laurentiis</author>
        <year>2005</year>
        <price>30.00</price>
    </book>
    <book category="children">
        <title lang="en">Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="web">
        <title lang="en">XQuery Kick Start</title>
        <author>James McGovern</author>
        <author>Per Bothner</author>
        <author>Kurt Cagle</author>
        <author>James Linn</author>
        <author>Vaidyanathan Nagarajan</author>
        <year>2003</year>
        <price>49.99</price>
    </book>
    <book category="web" cover="paperback">
        <title lang="en">Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
</bookstore>`;
const DemoXMLBuilder = () => {
  const [xml, setXML] = useState(
    new DOMParser().parseFromString(test_xml, "text/xml")
  );
  const onChange: XMLBuilderProps["onChange"] = function (xml, text) {
    setXML(xml);
    console.log(text);
  };
  // useEffect(function () {
  //   fetch("./text.xml?2")
  //     .then((res) => res.text())
  //     .then((txt) => {
  //       const xml = new DOMParser().parseFromString(txt, "text/xml");
  //       console.log(xml);
  //       setXML(xml);
  //     });
  // }, []);
  return <XMLBuilder xml={xml} onChange={onChange} />;
};

export default DemoXMLBuilder